<template>
    <view>
        <!-- 顶部导航栏 -->
        <view class="x gun">
            <view class="x">
                <scroll-view class="gundong1" scroll-y v-for="(item,index) in from" :key="index">
                    <view :class="{'active1':isActive1 == index}" @click="checked1(item.id,index)">
                        {{item.name}} <!-- 导航栏字段名称 -->
                    </view>
                </scroll-view>
            </view>
        </view>
        <!-- @scrolltolower 滚动触发事件 -->
        <scroll-view scroll-y="true" class="scroll-y" @scrolltolower="lower">
            <!-- 广告标题 -->
            <view class="y czjz" style="margin-top: 30rpx;">
                <view style="font-size: 45rpx;">
                    {{from1.name}} <!-- 广告标题一 -->
                </view>
                <view style="color: #b6b6b6;margin-top: 20rpx;">
                    {{from1.desc}} <!-- 广告标题二 -->
                </view>
            </view>
            <!-- 商品 -->
            <view class="y" style="margin-top: 60rpx;">
                <view class="x" style="width: 90%;margin: auto;" v-for="(item,index) in from2" :key="index">
                    <!-- 商品图片 -->
                    <view style="width: 170rpx;">
                        <image :src="item.picUrl" mode="" style="width: 150rpx; height: 150rpx;"></image>
                    </view>
                    <!-- 商品名称、介绍、价格 -->
                    <view class="zxfx" style="color: #404040;font-size: 29rpx;">
                        <view class="">
                            <p>{{item.name}} </p> <!-- 商品名称 -->
                            <p>{{item.brief}}</p> <!-- 商品介绍 -->
                        </view>
                        <view class="x">
                            <p style="font-size: 35rpx;">
                                ￥{{item.retailPrice}} <!-- 商品现价格 -->
                            </p>
                            <p style="text-decoration: line-through;margin-left: 15rpx;
                                color: #b6b6b6;margin-top: 8rpx;">
                                ￥{{item.counterPrice}}<!-- 商品原价格 -->
                            </p>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                from: [], //顶部导航栏
                from1: [], //广告标题
                from2: [], //商品
                from3: [],
                isActive1: 0, //顶部导航栏默认显示第一个
                ids: 0, //商品默认显示
                total: '', //总页数
                limit: 10, //每页条数
                page: 1, //默认当前页
            }
        },
        methods: {
            // 滚动事件方法
            lower() {
                // console.log("到底部了");
                this.page = this.page + 1
                uni.request({
                    //接口数据根据给的id来默认显示数据
                    url: 'http://47.91.230.137:8086/wx/goods/list?categoryId=' +
                        this.ids + '&page=' + this.page,
                    success: (ress) => {
                        var arr1 = this.from2;
                        var arr2 = ress.data.data.list;
                        var combined = arr1.concat(arr2);
                        // console.log(combined);
                        this.from2 = combined
                    }
                })
            },
            dianji() {

            },
            checked1(id, index) {
                this.isActive1 = index //顶部导航栏切换
                // console.log(id)
                // 点击导航栏字段切换显示对应的饿广告内容
                uni.request({
                    url: 'http://47.91.230.137:8086/wx/goods/category?id=' + id, //接口数据根据导航栏的id显示
                    success: (res) => {
                        this.from1 = res.data.data.currentCategory

                    }
                })
                // 点击导航栏字段切换显示对应的商品
                uni.request({
                    url: 'http://47.91.230.137:8086/wx/goods/list?categoryId=' + id, //接口数据根据导航栏的id显示
                    success: (res) => {
                        this.from2 = res.data.data.list
                    }
                })
            }
        },
        onLoad(obj) {
            // console.log(obj.id)
            uni.request({
                url: 'http://47.91.230.137:8086/wx/goods/category?id=' + obj.id, //接收页面传过来的id
                success: (res) => {
                    this.from = res.data.data.brotherCategory //顶部导航栏数据
                    this.from1 = res.data.data.currentCategory //商品广告数据
                    this.ids = res.data.data.brotherCategory[0].id //拿到进入页面显示的第一个
                    uni.request({
                        //接口数据根据给的id来默认显示数据
                        url: 'http://47.91.230.137:8086/wx/goods/list?categoryId=' + this.ids +
                            '&page=' + this.page,
                        success: (ress) => {
                            // console.log(this.from2)
                            this.from2 = ress.data.data.list
                        }
                    })
                }
            })
        }
    }
</script>

<style scoped>
    .gundong1 view {
        width: 160rpx;
        /* height: 100rpx; */
        line-height: 90rpx;
        text-align: center;
        font-size: 28rpx;
        margin: auto;
        flex-basis: 100rpx;
    }

    .active1 {
        color: #ff8c65;
        font-weight: 700;
        border-bottom: 8rpx solid #ff5934;
    }

    .gun {
        /* 超出盒子横向滚动 */
        overflow: scroll;
    }
</style>